<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>茶叶 | 追溯</title>
<style type="text/css">
body { background-color: #eeeeee; margin: 0 auto; text-align: center;  }
#header, #content { border: 2px solid #DDD; width: 970px; background-color: white; margin: 0 auto; margin-top: 3px; }
#content { height: 700px; margin-top: 5px; }
.navigator { 
	display: block; 
	width: inherit;
	height: 20px;
	padding: 5px 5px 5px 5px;
	text-decoration: none; 
	color: #333;
}
.navigator:hover {
	background-color: #ddd;
}
.selected { background-color: #CCC; }
</style>
</head>

<body>
<div align="center" id="header" >
  <div align="left" style="padding-left: 20px;"><h1>茶叶防伪与追溯门户</h1>诚信为本，追求卓越，精益求精，缔造永恒</div>
  <table width="970" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="*" height="28">&nbsp;</td>
      <td width="113" height="28" align="center"><a href="index.jsp" class="navigator">首页</a></td>
      <td width="113" height="28" align="center"><a href="javascript:void(0)" class="navigator selected">茶叶追溯</a></td>
      <td width="113" height="28" align="center"><a href="validate.jsp" class="navigator">商品真伪验证</a></td>
      <td width="15" height="28" align="center">&nbsp;</td>
    </tr>
  </table>
</div>
<div align="left" id="content" style="text-align: center;">
	<br/><br/>
	<fieldset style="width: 800px; height: 500px; text-align: left; margin: 0 auto;">
		<legend><h2>茶叶信息追溯</h3></legend>
		<h4>该功能的目的是让消费者能够了解茶叶产品溯源完整信息，请按照以下步骤操作:</h4><br/>
		<div id="validateForm" style="margin-left: 15px;">
			请输入产品号，并点击查询：<br/>
			<div style="margin-top: 14px;">
				<form action="product/trace" method="post">
					<input style="width: 400px;" name="productId" id="productIdInput"/>&nbsp;
					<input type="submit" value="&nbsp;&nbsp;查询&nbsp;&nbsp;" />
				</form>
			</div>
			<div id="searchResultDiv" style="margin-top: 14px; font-size: 15px;">
				<c:if test="${not empty product }">
					<table border="0" style="color: #555;">
						<tr><td>产品号:</td><td>${product.id }</td></tr>
						<tr><td>产品名:</td><td>${product.name }</td></tr>
						<tr><td>生产时间:</td><td>${product.produceTime }</td></tr>
					</table><br/>
					以下是溯源点信息
					<table style="color: #555;">
						<tr><th width="24"></th><th width="150">记录点</th><th width="200">记录时间</th><th width="300">信息</th></tr>
						<c:forEach items="${product.traceInfoSet }" var="traceInfo" varStatus="vs">
						<tr><td>${vs.index + 1 }</td>
							<td>${traceInfo.address }</td>
							<td>${traceInfo.recordTime }</td>
							<td>${traceInfo.description }</td>
						</tr>
						</c:forEach>
					</table>
				</c:if>
				<c:if test="${empty product and empty param.first}">
					无此产品的信息，请检查是否输入有误！
				</c:if>
			</div>
		</div>
	</fieldset>
</div>
</body>
</html>
